<template>
  <div class="container" style="height: 100%;padding: 20px">

    <el-table ref="table" class="roomTable" :data="tableData" style="width: 100%">
      <el-table-column label="#" type="index"></el-table-column>
      <el-table-column label="用户" prop="userName"></el-table-column>
      <el-table-column label="账号" prop="userPhone"></el-table-column>
      <el-table-column label="密码">
        <template slot-scope="{row}">
          <div v-if="row.reset">{{row['reset']}}</div>
          <el-popconfirm v-if="!row.reset" title="确定重置吗？" @onConfirm="handleReset(row)">
            <el-button slot="reference" type="text">重置密码</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div style="font-size: 14px;text-align: right">* 重置后密码请妥善保存,刷新后将不可见</div>

  </div>
</template>

<script>

import { listMixin } from '@/mixin'
import { getAssessmentUserList,resetPassword } from '@/api/assessment'

export default {
  name: 'Users',
  mixins: [listMixin],
  data() {
    return {
      loading: false,
      tableData: [],
    }
  },
  methods: {
    loadData() {
      return getAssessmentUserList().then(res => {
        let { data, total } = res
        this.tableData = data
      })
    },
    handleReset(user){
      this.loading = true
      resetPassword({phone:user.userPhone}).then(res => {
        if (res.code !== 10000) {
          this.loading = false
          return
        }
        this.$message.success(res.msg)
        this.$set(user,'reset',res.data)
        this.loading = false
      })


    }
  },
  mounted() {
    this.loadDataProxy()
  }
}
</script>
